<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--

        想让一个容器在浏览器的范围内水平垂直居中
           1, position: fixed;
             left:50%;
             top:50%;
             margin-left:-盒子宽度的一半;
             margin-top: -盒子高度的一半;
            
            2, position:fixed;
                left:0;
                right: 0;
                bottom:0;
                top:0;
                margin: auto;
     -->
     <style>
         *{padding:0; margin:0;}
         body{
             background: #000;
         }
         .box{
             width:300px; height:300px; background: #fff;
             position: fixed;
             /* left:50%;
             top:50%;
             margin-left:-150px;
             margin-top: -150px; */
             left:0;
             right: 0;
             bottom:0;
             top:0;
             margin: auto;
         }
     </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>